<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="hello">{{ name }}</p>
        <div ref="world">哈哈</div>

        <button @click="show">按钮</button>
        <button @click="modify">修改name</button>
        <hr>

        <p>{{ user.username }}</p>
        <p>{{ user.password }}</p>
        <button @click="doUpdate">修改user的username</button>
        <button @click="doAdd">为user添加password</button>
        <button @click="doDelete">删除user的username</button></button>
    </div>
</body>
<script>
    var vm = new Vue({
        // el:'#app',
        data:{
            name:'alice',
            age:20,
            user:{
                id:1001,
                username:'aaa'
            }
        },
        methods: {
            show:function(){
                console.log(this.$refs.hello)
            },
            modify(){
                this.name = 'zhangsan'
                
                // 等待dom更新后再执行
                this.$nextTick(function(){
                    console.log(this.$refs.hello.innerText)
                })
            },
            doUpdate(){
                this.user.username = 'bbb'
            },
            doAdd(){
                // this.user.password = '123456'
                this.$set(this.user,'password','123456')
            },
            doDelete(){
                // delete this.user.username
                this.$delete(this.user,'username')
            }
        },
        aa:'bb'
    }).$mount('#app')

    /**
     * 实例属性
     */ 
    // console.log(vm)
    // console.log(vm.$el)
    // console.log(vm.$data)
    // console.log(vm.$options)
    // console.log(vm.$refs.hello)

    /**
     * 实例方法
     */
    // vm.$mount('#app')
    // vm.$destroy()


</script>
</html>